<template>
	<view class="pad20">
		<view class="data-view border-rad20">
			<view class="goods-view flex-cc" >
				<view class="goods-img">
					<image src="../../../../static/temp/cate1.jpg" mode=""></image>
				</view>
				<view class="">
					<view class="bill-title">
						商品名字商品名字商品名字商品名字商品名字商品名字
					</view>
					<view class=" flex-cb">
						<text class="g-name">客户名字</text>
						<text class="g-num">￥265.00</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="order-det mar-t20 border-rad20">
			<view class="border-b order-t">
				订单详情
			</view>
			<view class="">
				<text>付款方式:</text><text>微信付款</text>
			</view>
			<view class="">
				<text>订单编号:</text><text>54654654654654645</text>
			</view>
			<view class="">
				<text>创建时间:</text><text>2019/08/30 09:15:46</text>
			</view>
			<view class="">
				<text>付款时间:</text><text>2019/08/30 09:15:46</text>
			</view>
			<view class="">
				<text>发货时间:</text><text>2019/08/30 09:15:46</text>
			</view>
		</view> 
		
		
		<!-- 评价 -->
		<view class="evaluation border-rad20 pad20">
			<view class="border-b order-t">
				评价
			</view>
		<!-- 星星 -->
			<view class="head-view flex-cfs">
				<view class="">
					商品评分:
				</view>
				<view class="flex-cc mar-l20">
					<text class="qxicon iconstar" :class="points>0?'yes':'no'"></text>
					<text class="qxicon iconstar" :class="points>1?'yes':'no'" ></text>
					<text class="qxicon iconstar" :class="points>2?'yes':'no'"></text>
					<text class="qxicon iconstar" :class="points>3?'yes':'no'"></text>
					<text class="qxicon iconstar" :class="points>4?'yes':'no'"></text>
				</view>
			</view>
			<view class="">
				2019/08/30 颜色 25码
			</view>
			<view class="">
				非常好看，没有色差，穿上大小刚刚好，质量也很好，布料很柔软，给店家赞赞赞赞
			</view>
			<!-- 图片 -->
			<view class="cu-form-group">
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				points:5,
				imgList:[
					'../../../../static/temp/cate1.jpg',
					'../../../../static/temp/cate1.jpg',
					'../../../../static/temp/cate1.jpg'
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.data-view{
	background-color: #FFFFFF;
	padding: 20upx;
}
	.goods-img image{
		width:120upx;
		height:120upx;
	}
	.g-num,.g-name{
		font-weight:550;
	}
	.g-num{
		font-size:32upx;
		color:rgba(245,145,38,1);
		line-height:44px;
	}
	.g-name{
		font-size:24upx;
		font-family:PingFangSC-Medium,PingFang SC;
		color:rgba(124,124,124,1);
		line-height:34upx;
	}
	
	.evaluation{
		background-color: #FFFFFF;
	}
	
	.order-det{
		background-color: #FFFFFF;
		margin: 20upx 0;
		padding: 20upx;
		font-weight:500;
		font-family:PingFangSC-Medium,PingFang SC;
	}
	.order-t{
		font-size:28upx;
		color:rgba(60,60,60,1);
		line-height:40upx;
		margin-bottom: 10upx;
		font-weight:800;
	}
	.order-det>view{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.order-det text{
		padding: 10upx 0;
		font-size:24upx;
		color:rgba(124,124,124,1);
		line-height:34upx;
	}
	
	.head-view{
		background-color: #FFFFFF;
		
	}
	.head-img{
		width:80upx;
		height:80upx;
		border-radius:8upx;
	}
	.head-text{
		font-size:28upx;
		font-weight:600;
		color:rgba(60,60,60,1);
		line-height:40upx;
	}
	.no{
		color: #B4B4B4;
	}
	.yes{
		color: #F59126;
	}
	
</style>
